<!-- 
 搜索结果列表 
 -->
<template>
	<view class="all-list-box">
		
		<view class="search-top bg-fa" id="searchList">
			<view :style="{'height':StatusBar == 0 ? '10px' : StatusBar+'px'}"></view>
			<search-top @toSearch="onSearch"></search-top>
			<!--  排序方式  -->
			<view class="condition-box bg-fa" :class="{'search-fixed':searchFixed}">
				<view class="item-name">
					<view class="item-text" :class="{'item-action':priceSort == 0 && sortType == 0}" @tap="switchSort(0)">
						综合
					</view>
				</view>
				<view class="item-name">
					<view class="item-text" :class="{'item-action':sortType == 1}" @tap="switchSort(1)">
						销量
					</view>
				</view>
				<view class="item-name">
					<view class="item-text" @tap="switchSort(2)">
						价格
						<text class="iconfont iconshangxiajiantou-  price-icon" v-show="priceSort == 0"></text>
						<text class="iconfont iconxia price-icon"  v-show="priceSort == 2"></text>
						<text class="iconfont iconshang price-icon"  v-show="priceSort == 1"></text>
					</view>
				</view>
				<view class="item-name">
					<view class="item-text" @tap="switchListType">
						<text class="iconfont iconshuping heng" v-show="listType == 2"></text>
						<text class="iconfont iconhengping su" v-show="listType == 1"></text>
					</view>
				</view>
			</view>
			
			<!--  排序方式end  -->
		</view>
		
		
		<view class="search-list-box" :class="{'se-flex':listType == 1}">
			<view class="list-padd-box" v-for="item in 10 " :key="item">
				<search-list :type="listType"></search-list>
			</view>
		</view>
		
		
		<!--  返回顶部  -->
		<u-back-top :scroll-top="scrollTop" top="1500"></u-back-top>
		
	</view>
</template>

<script>
	import searchTop from "@/components/search-top.vue"
	import searchList from "@/components/search-list.vue"
	export default {
		name:"allList",
		data(){
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				isMore:false,
				pageNo:1,
				/*  滚动距离  */
				scrollTop:0,
				
				/*  排序是否固定顶部  */
				searchFixed:false,
				/* 顶部的搜索栏高度 */
				searchH:90,
				
				/*  价格排序  */
				priceSort:0,//0是默认 1是高到低 2是低到高
				/*  排序方式  */
				sortType:0,// 0 是综合  1 是销量 2 是价格
				
				/*  列表模式  */
				listType:1,// 1 是竖屏 2 是横屏
				
			}
		},
		methods:{
			/*  点击搜索的时候  */
			onSearch(){
				
			},
			
			/*  切换列表显示方式  */
			switchListType(){
				this.listType = this.listType == 1 ? 2 : 1
			},
			
			/*  切换排序方式的时候  */
			switchSort(type){
				if(this.sortType == type && type != 2){
					return false
				}
				
				/*  判断是否是价格排序的方式  */
				if(type == 0 || type == 1){
					this.priceSort = 0
				}else if(type == 2){
					if(this.priceSort == 0){
						this.priceSort = 1
					}else{
						this.priceSort = this.priceSort == 1 ? 2 : 1
					}
				}
				this.sortType = type
			},
			
			/*  获取数据列表  */
			getList(){
				uni.stopPullDownRefresh()
			}
			
		},
		
		/*  下拉刷新  */
		onPullDownRefresh(){
			uni.stopPullDownRefresh()
			this.pageNo = 1
			this.isMore = true
			let t = setTimeout(()=>{
				this.getList(0)
				clearTimeout(t)
			},500)
		},
		
		/*  滚动到底部  */
		onReachBottom(){
			if(this.isMore){
				this.pageNo = this.pageNo + 1
				this.getList(1)
			}
		},
		
		/*  页面滚动位置  */
		onPageScroll(e){
			this.scrollTop = e.scrollTop
			if(e.scrollTop > this.searchH){
				this.searchFixed = true
			}else{
				this.searchFixed = false
			}
		},
		
		components:{
			searchTop, searchList
		},
		onLoad() {
			
		},
		onReady() {
			let _this = this
			const query = uni.createSelectorQuery().in(this)
			query.select('#searchList').boundingClientRect((data) => {
				_this.searchH = data.height
			}).exec();
		}
	}
</script>

<style scoped lang="scss">
	.all-list-box{
		max-width: 2400rpx;
		margin: 0 auto;
		.search-top{
			width: 100%;
			padding: 0 20rpx 0 20rpx ;
		}
		
		.search-list-box{
			width: 100%;
			padding: 0 10rpx 40rpx 10rpx;
			margin-top: 10rpx;
			.list-padd-box{
				margin-top: 10rpx;
				width: 100%;
			}
			&.se-flex{
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: wrap;
				.list-padd-box{
					min-width: 50%;
					max-width: 50%;
					padding-right: 5rpx;
				}
				.list-padd-box:nth-of-type(2n){
					padding-right: 0;
					padding-left: 5rpx;
				}
				
			}
		}
		
		.condition-box{
			border-top: 2rpx solid #FFFFFF;
			height: 72rpx;
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			&.search-fixed{
			position: fixed;
			top: 0;
			margin: 0;
			border: none;
			z-index: 100;
			left: 0;
			right: 0;
			width: 100%;
		}
			.item-name{
				width: 100%;
				height: 100%;
				text-align: center;
			}
			.item-text{
				display: inline-block;
				height: 56rpx;
				line-height: 56rpx;
				padding: 0 8rpx;
				margin-top: 8rpx;
				&.item-action{
					border-bottom: 4rpx solid #FFFFFF;
				}
				.iconfont{
					color: #FFFFFF;
				}
				.price-icon{
					font-size: 24rpx;
					margin-left: 6rpx;
				}
				.heng{
					font-size: 32rpx;
					vertical-align: sub;
				}
				.su{
					font-size: 32rpx;
					vertical-align: sub;
				}
			}
		}
	}
	
</style>
